<template>
  <n-modal v-model:show="showRef" class="go-create-modal" @afterLeave="closeHandle" @afterEnter="openHandle">
    <n-space size="large">
      <n-card class="card-box" hoverable>
        <template #header>
          <n-text class="card-box-tite">发布项目</n-text>
        </template>
        <template #header-extra>
          <n-text @click="closeHandle">
            <n-icon size="20">
              <component :is="CloseIcon"></component>
            </n-icon>
          </n-text>
        </template>
        <n-space class="card-box-content" justify="center">
          <n-form ref="formRef" :label-width="80" style="width: 400px" :model="formValue" :rules="rules">
            <n-form-item label="发布到租户" path="domainids">
              <n-select v-model:value="formValue.domainids" multiple :options="domainOptions" placeholder="请选择" />
            </n-form-item>
            <div style="text-align: right">
              <n-button type="primary" attr-type="button" :loading="loading" @click="handleValidateClick">
                发布
              </n-button>
            </div>
          </n-form>
        </n-space>
      </n-card>
    </n-space>
  </n-modal>
</template>

<script lang="ts" setup>
import { ref, watch, reactive } from 'vue'
import { icon } from '@/plugins'
import { getDomainListApi } from '@/api/cloud/domain'
import { getUUID } from '@/utils'
const { CloseIcon } = icon.ionicons5
const showRef = ref(false)

const emit = defineEmits(['close', 'submit'])
const props = defineProps({
  show: Boolean,
  cardData: Object,
  loading: Boolean
})

const rules = ref({
  domainids: {
    required: true,
    type: 'array',
    message: '请选择租户',
    trigger: ['change']
  }
})

const formValue = reactive<any>({
  domainids: []
})
const formRef = ref<any>({})

watch(props, newValue => {
  showRef.value = newValue.show
  formValue.domainids = []
})

// 关闭对话框
const closeHandle = () => {
  emit('close', false)
}

// 打开对话框
const openHandle = () => {
  getDomainList()
}

// 提交验证
const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault()
  formRef.value?.validate((errors: any) => {
    if (!errors) {
      // success
      const data = {
        ...props.cardData,
        content: {
          ...props.cardData?.content
        }
      }
      if (!data.content.release_domain) data.content.release_domain = {}
      // data.content.release_domain = {}
      for (let item of formValue.domainids) {
        data.content.release_domain[item] = {
          project_id:
            data.content.release_domain[item] && data.content.release_domain[item].project_id
              ? data.content.release_domain[item].project_id
              : getUUID()
        }
      }
      emit('submit', data, formValue.domainids)
    }
  })
}

const domainOptions = ref<any[]>([])
// 获取租户列表
const getDomainList = async () => {
  const res: any = await getDomainListApi()
  domainOptions.value = res.msg.map((item: any) => {
    return {
      label: item.name + `（${item.path}）`,
      value: item.id
    }
  })
  domainOptions.value.unshift({
    label: '选择租户发布后，会复制该项目到租户的项目列表中',
    value: 0,
    disabled: true
  })
}
</script>
<style lang="scss" scoped>
$cardWidth: 570px;

@include go('create-modal') {
  position: fixed;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  .card-box {
    width: $cardWidth;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0);
    @extend .go-transition;
    &:hover {
      @include hover-border-color('hover-border-color');
    }
    &-tite {
      font-size: 14px;
    }
    &-content {
      padding: 0px 10px;
      width: 100%;
    }
  }
}
</style>
